<template>
  <!-- 导航栏 -->
  <div class="navbar-container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light container">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">
          <img
            src="@/assets/img/common/logo_header.png"
            class="logo"
            alt=""
            srcset=""
          />
        </a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav me-auto">
            <!-- 使用me-auto确保左侧链接在可用空间内自动排列 -->
            <li
              class="nav-item nav-li"
              v-for="item in menuItems"
              :key="item.id"
            >
              <router-link :to="item.link" class="nav-link">{{
                item.name
              }}</router-link>
            </li>
          </ul>
          <!-- 在这里添加登录和注册按钮或头像和昵称 -->
          <ul class="navbar-nav">
            <!-- 如果用户未登录 -->
            <li class="nav-item nav-li" v-if="!isLoggedIn">
              <a class="nav-link" href="/login">登录</a>
            </li>
            <li class="nav-item nav-li" v-if="!isLoggedIn">
              <a class="nav-link" href="/register">注册</a>
            </li>
            <!-- 如果用户已登录 -->
            <li class="nav-item dropdown" v-else>
              <a
                class="nav-link dropdown-toggle d-flex align-items-center"
                href="#"
                id="navbarDropdown"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                <div
                  class="me-2 avatar"
                  style="
                    width: 32px;
                    height: 32px;
                    background-color: #ffa473;
                    border-radius: 50%;
                  "
                ></div>
                <span class="text-muted nav-li">欢迎{{ username }}</span>
              </a>
              <ul class="dropdown-menu nav-li" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#">个人信息设置</a></li>
                <li>
                  <button class="dropdown-item nav-li" @click="logout">
                    退出登录
                  </button>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</template>

<script>
import axios from "axios";
import { ref, computed } from "vue";
import { useStore } from "vuex";

export default {
  name: "NavbarComponent",
  methods: {
    async logout() {
      this.$store.commit("logout");
      localStorage.removeItem("auth_token");
      try {
        // 发送请求到后端API来销毁session
        const response = await axios.get("/api/logout"); // 假设后端提供了一个'/api/logout'的路由来处理退出登录

        if (response.status === 200) {
          // 如果后端返回成功，你可以在这里执行一些操作，比如重定向到登录页面
          this.$router.push("/home");
          console.log(response.data.success);
          // alert("成功退出登录！");
        } else {
          // 处理错误情况
          console.log("退出登录失败，状态码：" + response.status);
          console.log(response.data.message);
          alert("退出登录失败！");
        }
      } catch (error) {
        // 处理请求错误
        console.error("退出登录时发生错误:", error);
        alert("退出登录时发生错误，请稍后再试！");
      }
    },
  },
  setup() {
    const { getters } = useStore();
    const isLoggedIn = computed(() => getters.isLoggedIn);
    const username = computed(() => getters.user.name);

    const menuItems = ref([
      { id: 1, name: "首页", link: "/home" },
      { id: 2, name: "网盘", link: "/networkdisk" },
      { id: 3, name: "文档", link: "/document" },
      // ... 其他导航项
    ]);

    // 如果需要基于登录状态动态改变菜单项，可以在这里进行

    return {
      isLoggedIn, // 返回computed属性，使其可以在模板中使用
      username, // 同样返回computed属性
      menuItems,
    };
  },
};
</script>

<style scoped>
/* 在你的标签内添加 */
.router-link-active {
  color: #42b983;
  font-weight: bold;
}
/* 这里可以添加一些额外的或覆盖Bootstrap的样式 */
.logo {
  width: 100px;
  height: 30px;
  /* border-radius: 50%; */
}
.nav-li {
  font-size: 13px;
}
.navbar-container {
  background-color: #f8f9fa;
}
</style>
